﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head><link rel="stylesheet" href="${ctx}/common/common.css">
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all">
    <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>
    
    <script src="${ctx}/common/plugins/jquery-1.10.2.min.js"></script>
</head>
<style>
    .inspectionDetail {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 10px;
        padding-bottom: 10px
    }

    .inspectionDetail > ul {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
    }

    .inspectionDetail > ul > li {
        padding-right: 10px;
        border-bottom: 1px #0e9aef dashed;
        padding-top: 10px;
        padding-bottom: 10px
    }

    .inspectionInfo {
        padding-left: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        border-radius: 10px;
        margin-left:20px;
        width: 90%;
        border: 1px solid #00F7DE;
        display: flex;
        flex-direction: column;
        margin-top: 50px
    }

    .inspectionInfo > ul {
        border-bottom: 1px solid #0e9aef;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 10px;
        padding-bottom: 10px
    }

    .topCard {
        display: flex;
        flex-direction: row;
        width: 240px;
        height: 50px;
        margin-left: 50px;
        margin-top: 20px
    }

    .topCard > div {
        color: white;
        line-height: 50px;
        text-align: center
    }
    .layui-carousel>[carousel-item] {
        height: 90%;
        width: 80%;
        margin-left: 10%;
        margin-top: 20px;
    }
</style>
<body>
<div>
    <%--顶部信息--%>
    <div class="topCard">
        <div style="width: 30%;background-color: #1a7bb9;">加工单号</div>
        <div style="width: 70%;background-color: #0e9aef;">
            <c:if test="${!empty inspectionReportList && inspectionReportList.size()>0}">
                ${inspectionReportList.get(0).workCode}
            </c:if>
        </div>
    </div>
    <%--工艺流程内容--%>
    <c:forEach items="${inspectionReportList}" var="inspectionReport">
        <div class="inspectionInfo">
            <ul>
                <li>入库申请单号:${inspectionReport.inCode}</li>
                <li>入库申请人：${inspectionReport.inName}</li>
                <li>入库申请日期：<fmt:formatDate value="${inspectionReport.inTime}" pattern="yyyy-MM-dd" /></li>
                <li>入库申请仓库：${inspectionReport.inHouseName}</li>
                <li>入库申请数量：${inspectionReport.inQuantity}</li>
            </ul>

            <div class="inspectionDetail">
                <c:forEach items="${inspectionReport.tInspReportDetailList}" var="detail" varStatus="index">

                    <ul>
                        <c:if test="${detail.is_up eq '1'}">
                            <img style="width: 50px;position: fixed" src="${ctx}/common/imgs/hg.png">
                        </c:if>
                        <c:if test="${detail.is_up eq '2'}">
                            <img style="width: 50px;position: fixed" src="${ctx}/common/imgs/bhg.png">
                        </c:if>
                        <li>检验单号：${inspectionReport.code}</li>
                        <li>检验人员：${inspectionReport.personName}</li>
                        <li>检验方式：${inspectionReport.insp_type eq '1'?"自检":"送检"}</li>
                        <li  title="${inspectionReport.insp_org}">检验机构：${inspectionReport.insp_org==null?'无':fn:substring(inspectionReport.insp_org,0,5)}..</li>
                        <li>日期：<fmt:formatDate value="${inspectionReport.create_time}" pattern="yyyy-MM-dd" /></li>
                        <li title="${detail.name}">检验项：${fn:substring(detail.name,0,3)}..</li>
                        <li>样本量：${inspectionReport.sample_size}</li>
                        <li>结果：${detail.is_up eq '1'?'合格':'不合格'}</li>
                        <div class="layui-carousel imgs" id="img${detail.id}" style="display: none;height: 90%;width: 89%;">
                            <div style="color: #0e9aef;float: right;cursor: pointer" onclick="closeInspectionReport(this)">[关闭]</div>
                            <div carousel-item >
                                <c:forEach items="${inspectionReport.tInspReportAttList}" var="att">
                                   <img src="${ctx}${att.turl}" />
                                </c:forEach>
                            </div>
                        </div>
                        <li onclick="showInspectionReport(this)" style="color: #0e9aef;cursor: pointer">检验报告</li>
                    </ul>
                </c:forEach>
            </div>
        </div>
    </c:forEach>
</div>
</body>
<script>
    var ins;
    function showInspectionReport(obj){
        var imgId=$(obj).parent().children(".imgs").attr("id");
        if(ins!=null){
            ins.reload({
                elem: '#'+imgId
                ,full:true
                ,arrow: 'always' //始终显示箭头
            });
        }
        layui.use('carousel', function(){
            var  carousel = layui.carousel;
            //建造实例
            var ins=carousel.render({
                elem: '#'+imgId
                ,full:true
                ,arrow: 'always' //始终显示箭头
            });
            $(obj).parent().children(".imgs").show()
        });
    }
    function closeInspectionReport(obj){
        $(obj).parent().hide();
    }
</script>
</html>



